<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title></title>
    <link rel="stylesheet" type="text/css" href="./css/aui.2.0.css" />
    <link rel="stylesheet" type="text/css" href="./css/aui-slide.css" />
    <link rel="stylesheet" type="text/css" href="./css/style.css" />
    <script type="text/javascript" src="js/jq.js"></script>
</head>
<body>
<header>
    <div class="row">
        <div class="aui-col-xs-4">
            <img height="20" onClick="window.location='search.html';" src="images/header-search.png">
        </div>
        <div class="aui-col-xs-4">
            <img height="20" src="images/logo.png">
        </div>
        <div class="aui-col-xs-4 aui-text-right right">
            <img class="menu" height="20" src="images/menu.png">
        </div>
        <div class="aui-clearfix"></div>
    </div>
    <div class="menu_list">
        <div class="list">
            <div class="aui-text-center name"><a href="./">HOME</a></div>
            <div class="aui-text-center name"><a href="">SHOP</a></div>
            <div class="aui-text-center name"><a href="">ABOUT</a></div>
            <div class="aui-text-center name"><a href="news.html">NEWS</a></div>
            <div class="aui-text-center name"><a href="">SERVICE</a></div>
            <div class="aui-text-center img"><a href=""><img height="20" src="images/menu-logo.png"></a></div>
        </div>
    </div>
</header>

<div id="aui-slide">
    <div class="aui-slide-wrap" id="focus_list">
        <div class="aui-slide-node bg-dark">
            <img src="images/banner.png" />
        </div>
        <div class="aui-slide-node bg-dark">
            <img src="images/banner.png" />
        </div>
        <div class="aui-slide-node bg-dark">
            <img src="images/banner.png" />
        </div>
    </div>
    <div class="aui-slide-page-wrap"><!--分页容器--></div>
</div>
<div class="shop_detail_content">
    <div class="title">LIANDAI SERIES</div>
    <div class="price">$ 199.00</div>
    <div class="color">COLOR</div>
    <div class="color_list">
        <div class="aui-col-xs-4 row cur">
            <div class="aui-pull-left left">
                <img src="images/shop-color.png" height="20">
            </div>
            <div class="aui-pull-left right">WJ-01P</div>
        </div>
        <div class="aui-col-xs-4 row">
            <div class="aui-pull-left left">
                <img src="images/shop-color.png" height="20">
            </div>
            <div class="aui-pull-left right">WJ-01P</div>
        </div>
        <div class="aui-col-xs-4 row">
            <div class="aui-pull-left left">
                <img src="images/shop-color.png" height="20">
            </div>
            <div class="aui-pull-left right">WJ-01P</div>
        </div>
        <div class="aui-col-xs-4 row">
            <div class="aui-pull-left left">
                <img src="images/shop-color.png" height="20">
            </div>
            <div class="aui-pull-left right">WJ-01P</div>
        </div>
        <div class="aui-col-xs-4 row">
            <div class="aui-pull-left left">
                <img src="images/shop-color.png" height="20">
            </div>
            <div class="aui-pull-left right">WJ-01P</div>
        </div>
        <div class="aui-col-xs-4 row">
            <div class="aui-pull-left left">
                <img src="images/shop-color.png" height="20">
            </div>
            <div class="aui-pull-left right">WJ-01P</div>
        </div>
        <div class="aui-clearfix"></div>
    </div>
    <div class="add_list aui-text-center">
        <span class="aui-col-xs-4"><img height="18" src="images/shop-left.png"></span>
        <span class="aui-col-xs-4">1</span>
        <span class="aui-col-xs-4"><img height="18" src="images/shop-right.png"></span>
    </div>
    <div class="add aui-text-center">ADD TO CART</div>
    <div class="buy aui-text-center">BUY IN AMAZON</div>
</div>
<div class="shop_detail_content aui-margin-t-15">
    <div class="icon_row">+细节描述</div>
    <div class="show_list">1</div>
    <div class="icon_row">+运输和退换</div>
    <div class="show_list">2</div>
    <div class="icon_row">+评论(3)</div>
    <div class="show_list">
        <div class="row">
            <div class="aui-font-center">
                <div class="aui-col-xs-3">
                    <img src="images/shop-member.png">
                </div>
                <div class="aui-col-xs-9">
                    <div class="name">op super</div>
                    <div class="abst">eptember 12, 2015</div>
                </div>
                <div class="aui-clearfix"></div>
            </div>
            <div class="resume">Most people reflect the sound when reading larger, I have no sound here, may be a computer thing. 2.0 interface perfect recognition, </div>
        </div>
        <div class="row">
            <div class="aui-font-center">
                <div class="aui-col-xs-3">
                    <img src="images/shop-member.png">
                </div>
                <div class="aui-col-xs-9">
                    <div class="name">op super</div>
                    <div class="abst">eptember 12, 2015</div>
                </div>
                <div class="aui-clearfix"></div>
            </div>
            <div class="resume">Most people reflect the sound when reading larger, I have no sound here, may be a computer thing. 2.0 interface perfect recognition, </div>
        </div>
        <div class="row">
            <div class="aui-font-center">
                <div class="aui-col-xs-3">
                    <img src="images/shop-member.png">
                </div>
                <div class="aui-col-xs-9">
                    <div class="name">op super</div>
                    <div class="abst">eptember 12, 2015</div>
                </div>
                <div class="aui-clearfix"></div>
            </div>
            <div class="resume">Most people reflect the sound when reading larger, I have no sound here, may be a computer thing. 2.0 interface perfect recognition, </div>
        </div>
        <div class="review"><span>Write a customer review</span></div>
    </div>
    <div class="aui-margin-t-15"><img height="20" src="images/shop-share.png"></div>
</div>
<div class="shop_list aui-margin-t-15">
    <div class="row aui-font-center" style="background:#fff;">
        <div class="aui-col-xs-6"><img src="images/shop-img01.png"></div>
        <div class="aui-col-xs-6 aui-padded-r-10 aui-padded-l-10">
            <div class="name">DRAMATIC</div>
            <div class="abst">the PRO40 is ideal for studio and performance mixing and ruggedly built for daily use</div>
        </div>
        <div class="aui-clearfix"></div>
    </div>
</div>
<div class="search_contents">
    <div class="recommend_name">相关推荐</div>
    <div class="recommend_list">
        <div class="aui-col-xs-6 aui-text-center">
            <div class="row">
                <div class="img"><img height="100" src="images/search-img.png"></div>
                <div class="name">mao tu series</div>
                <div class="abst">纹理系</div>
            </div>
        </div>
        <div class="aui-col-xs-6 aui-text-center">
            <div class="row">
                <div class="img"><img height="100" src="images/search-img.png"></div>
                <div class="name">mao tu series</div>
                <div class="abst">纹理系</div>
            </div>
        </div>
        <div class="aui-clearfix"></div>
    </div>
</div>
<footer>
    <div class="search"><input type="text" placeholder="Get Newsletter (email address)"></div>
    <div class="row aui-text-center">
        <a class="cur" href="">HOME</a>
        <a href="">ABOUT</a>
        <a href="">CONTACT</a>
        <a href="">PRIVACY</a>
        <a href="">POLICY</a>
    </div>
    <div class="share aui-text-center"><img height="20" src="images/share.png"></div>
    <div class="copyright"> Copyright © 2016 Massaro, Inc. All Rights Reserved. MUNITIO.</div>
</footer>
</body>
<script src="js/aui-slide.js"></script>
<script type="text/javascript">
    var slide = new auiSlide({
        container:document.getElementById("aui-slide"),
        // "width":300,
        "height":250,
        "speed":300,
        "autoPlay": 3000,
        "pageShow":true,
        "pageStyle":'dot',
        "loop":true,
        'dotPosition':'center'
    });
    $('.menu').click(function(){
        var Height = $(document).height();
        $('.menu_list').css('height',Height+'px').toggle();
    });
    $('.menu_list').click(function(){
        $(this).hide();
    });
    $('.color_list .row').click(function(){
        $('.color_list .row').removeClass('cur');
        $(this).addClass('cur');
    });
    $('.shop_detail_content .icon_row').click(function(){
        if($(this).hasClass('cur')){
            $(this).removeClass('cur');
            $(this).next().hide();
        }else{
            $(this).addClass('cur');
            $(this).next().show();
        }
    });
</script>
</html>